<template>
  <div>
    <div class="header">
      <Header :isEditor="true" :id="id" />
    </div>
    <!-- 编辑器主体区域 -->
    <div class="container">
      <LeftSide />
      <RightSide />
    </div>
    <div>
      <Center />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, provide } from 'vue';
import Header from '@/components/Common/Header.vue';
import LeftSide from '@/views/EditorView/LeftSide/Index.vue';
import Center from '@/views/EditorView/Center.vue';
import RightSide from '@/views/EditorView/RightSide.vue';
import { getSurveyById } from '@/db/operation';

import { restoreComponentStatus } from '@/utils';
import { ElMessage } from 'element-plus';
import type { PicLink, OptionsStatus, TypeStatus } from '@/types';
import { isPicLink, IsTypeStatus, IsOptionsStatus } from '@/types';
import { changeEditorIsShowStatus } from '@/utils';

// 路由
import { useRoute } from 'vue-router';
const route = useRoute();
// 仓库
import { useEditorStore } from '@/stores/useEditor';
const store = useEditorStore();
store.resetComs();

const id = computed(() => (route.params.id ? String(route.params.id) : ''));
const currentCom = computed(() => store.coms[store.currentComponentIndex]);
if (id.value) {
  getSurveyById(Number(id.value)).then((res) => {
    if (res) {
      restoreComponentStatus(res.coms);
      store.setStore(res);
    }
  });
}
const updateStatus = (configKey: string, payload?: number | string | boolean | PicLink) => {
  const currentComEditorStatus = currentCom.value.status as unknown as OptionsStatus | TypeStatus;
  // 拿到新的状态数据之后，就应该去修改仓库里面的数据
  switch (configKey) {
    case 'type': {
      if (typeof payload === 'number' && IsTypeStatus(currentComEditorStatus)) {
        // 切换其他编辑器的显示状态
        changeEditorIsShowStatus(currentComEditorStatus, payload);
        store.setCurrentStatus(currentComEditorStatus[configKey], payload);
      }
      break;
    }
    case 'title':
    case 'desc': {
      if (typeof payload !== 'string') {
        console.error('Invalid payload type for "title or desc". Expected string.');
        return;
      }
      store.setTextStatus(currentComEditorStatus[configKey], payload);
      break;
    }
    case 'options': {
      if (IsOptionsStatus(currentComEditorStatus))
        if (typeof payload === 'number') {
          // 说明是删除选项
          const result = store.removeOption(currentComEditorStatus[configKey], payload);
          if (result) ElMessage.success('删除成功');
          else ElMessage.error('至少保留两个选项');
        } else if (typeof payload === 'object' && isPicLink(payload)) {
          // 说明是在设置图片的链接
          store.setPicLinkByIndex(currentComEditorStatus[configKey], payload);
        } else {
          // 说明是新增选项
          store.addOption(currentComEditorStatus[configKey]);
        }
      break;
    }
    case 'position': {
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "position". Expected number.');
        return;
      }
      store.setPosition(currentComEditorStatus[configKey], payload);
      break;
    }
    case 'titleSize':
    case 'descSize': {
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "titleSize or descSize". Expected number.');
        return;
      }
      store.setCurrentStatus(currentComEditorStatus[configKey], payload);
      break;
    }
  }
};
const getLink = (link: PicLink) => {
  updateStatus('options', link);
};
provide('getLink', getLink);
provide('updateStatus', updateStatus);
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  background-color: var(--white);
  position: fixed;
  top: 0;
  z-index: 10;
}
.container {
  width: calc(100vw - 40px);
  padding: 20px;
  // Header的高度50px，上下padding 20px
  height: calc(100vh - 50px - 40px);
  background: url('@/assets/imgs/editor_background.png');
  position: fixed;
  top: 50px;
}
</style>
